<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="username">
    <button id="setData">设置数据</button>
    <button id="getData">获取数据</button>
    <button id="delData">删除数据</button>
    <script>
      var username = document.querySelector('#username');
      // 单击“设置数据”按钮，设置数据
      document.querySelector('#setData').onclick = function () {
        var val = username.value;
        sessionStorage.setItem('username', val);
      };
      // 单击“获取数据”按钮，获取数据
      document.querySelector('#getData').onclick = function () {
        alert(sessionStorage.getItem('username'));
      };
      // 单击“删除数据”按钮，删除数据
      document.querySelector('#delData').onclick = function () {
        sessionStorage.removeItem('username');
      };
    </script>
  </body>
</html>
